<template>
    <el-container class="layout-container">
        <el-header class="layout-header">
            <div class="logo-wrapper">
                <AppLogo />
            </div>
            <HeaderBar class="header-bar-flex" background="#fff" />
        </el-header>
        <el-container class="layout-body">
            <el-aside class="side-menu-aside" :style="{ width: sideMenuWidth }">
                <SideMenu />
            </el-aside>
            <el-main class="main-content">
                <router-view />
            </el-main>
        </el-container>

        <!-- <el-footer class="footer-bar-fixed">
            © {{ appConfig.copyright.year }} {{ appConfig.copyright.text }}
        </el-footer> -->
    </el-container>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { ElContainer, ElHeader, ElAside, ElMain, ElFooter } from 'element-plus';
import AppLogo from '@/components/layout/AppLogo.vue';
import HeaderBar from '@/components/layout/HeaderBar.vue';
import SideMenu from '@/components/layout/SideMenu.vue';
import FooterBar from '@/components/layout/FooterBar.vue';
import { appConfig } from '@/config/app';
import { useSideMenu } from '@/composables/useSideMenu';

const { isSideMenuCollapsed } = useSideMenu();

const sideMenuWidth = computed(() => isSideMenuCollapsed.value ? '64px' : '240px');
</script>

<style scoped>
.layout-container {
    min-height: 100vh;
    height: 100vh;
    background: linear-gradient(135deg, var(--el-color-info-light-9, #f4f6fa), var(--el-color-info-light-7, #e9ecf3));
    padding: 2px;
    box-sizing: border-box;
    overflow-y: hidden;
}

.layout-header {
    display: flex;
    align-items: center;
    height: 64px;
    background: transparent;
    border-radius: 12px;
    box-shadow: none;
    border: none;
    margin-bottom: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    gap: 0;
}

.header-bar-flex {
    flex: 1;
    background: transparent;
    box-shadow: none;
    border-radius: 0 12px 12px 0;
    margin-left: 0;
}

.logo-wrapper {
    width: auto;
    flex-shrink: 0;
}

.layout-body {
    flex: 1;
    min-height: 0;
    gap: 6px;
    display: flex;
    align-items: stretch;
    height: calc(100vh - 64px - 12px);
    width: 100%;
    box-sizing: border-box;
    overflow-y: hidden;
}

.side-menu-aside {
    background: #fff;
    border-radius: 8px;
    box-shadow: 2px 0 8px rgba(125, 166, 222, 0.08);
    padding: 0;
    border: 1px solid var(--el-border-color-light, #ebeef5);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-content {
    background: #fff;
    padding: 16px;
    min-height: 0;
    overflow: auto;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.02);
    border: 1px solid var(--el-border-color-light, #ebeef5);
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* .footer-bar-fixed {
    border-radius: 8px;
    width: 100%;
    background: var(--el-color-primary-light-9, #fff);
    border: 1px solid var(--el-border-color-light, #ebeef5);
    box-shadow: 0 -2px 8px rgba(178, 223, 219, 0.08);
    box-sizing: border-box;
    margin: 0;
} */
.footer-bar-fixed {
    background: linear-gradient(90deg, var(--gray-50), var(--gray-100));
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 14px;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.02);
    border-top: 1px solid var(--border-color);
    border-radius: 8px;
    z-index: 30;
    width: 100%;
}
</style>